<template>
  <div class="menu-container">
    <!-- 菜单内容 -->
    <div class="menu-content">
      <!-- 左侧一级菜单 -->
      <el-menu
        @open="handleOpen"
        @close="handleClose"
        background-color="#FFFFFF"
        text-color="#080808"
        unique-opened="true"
      >
        <!-- 顶部标题区域 -->
        <div class="menu-title">
          <el-icon><Flag /></el-icon>
        </div>
        <el-menu-item
          v-for="(item, index) in primaryMenuItems"
          :key="index"
          :index="item.path"
          @click="selectPrimaryMenuItem(item)"
        >
          <span class="menu-icon">
            <el-icon><component :is="item.icon" style="width: 16px; height: 16px" /></el-icon>
          </span>
          <!-- 图标样式 -->
          <span class="menu-text">{{ item.menuInfoName }}</span>
          <!-- 菜单项文字 -->
          <template v-if="item.children">
            <el-submenu>
              <template v-slot:title>
                <span>{{ item.menuInfoName }}</span>
              </template>
            </el-submenu>
          </template>
        </el-menu-item>
      </el-menu>

      <!-- 右侧二级菜单 -->
      <div class="secondary-menu">
        <el-menu
          class="el-menu-vertical-demo"
          v-if="selectedPrimaryMenuItem"
          :collapse="iscollapse"
          :default-active="$route.path"
        >
          <!-- 顶部标题区域 -->
          <div class="secondary-menu-title">标题</div>
          <el-divider style="margin: 15px 0">
            <span> {{ selectedPrimaryMenuItem.menuInfoName }} </span>
          </el-divider>
          <el-menu-item
            v-for="(item, index) in selectedPrimaryMenuItem.children"
            :key="index"
            :index="item.path"
            @click="clickMenu(item, selectedPrimaryMenuItem)"
          >
            <el-icon><component :is="item.icon" style="width: 15px; height: 15px" /></el-icon>
            <span class="secondary-menu-text">{{ item.menuInfoName }}</span>
            <!-- 二级菜单文字 -->
          </el-menu-item>
        </el-menu>
      </div>
    </div>
  </div>
</template>

<script>
import { ApiGetBasicData_Roleinfo_MenuInfoListAsync } from '@/api/basic/basicDataRoleinfoApi'
import { ElNotification } from 'element-plus'

export default {
  data() {
    return {
      isCollapse: false,
      primaryMenuItems: [],
      parentMenus: {},
      selectedPrimaryMenuItem: null
    }
  },
  computed: {
    iscollapse() {
      return this.$store.state.isCollapse
    }
  },
  created() {
    //获取菜单信息
    ApiGetBasicData_Roleinfo_MenuInfoListAsync().then((res) => {
      this.primaryMenuItems = res.data.data
      if (this.primaryMenuItems.length < 1) {
        ElNotification.error('找不到菜单信息')
        return
      }
      // 初始化选中第一个一级菜单
      this.selectPrimaryMenuItem(this.primaryMenuItems[0])
    })
  },
  methods: {
    //点击菜单
    clickMenu(item, parentMenu) {
      //菜单
      this.$router.push(item.path)

      this.parentMenus = { ...parentMenu }
      this.parentMenus.children = []
      if (parentMenu.menuInfoName != item.menuInfoName) {
        this.parentMenus.children.push(item)
      }
      //面包屑
      this.$store.commit('selectMenu', item)
      this.$store.commit('selectMenuBreadcrumb', this.parentMenus)
    },

    selectPrimaryMenuItem(menuItem) {
      this.selectedPrimaryMenuItem = menuItem
      this.clickMenu(menuItem.children[0], menuItem)
    }
  }
}
</script>

<style scoped>
.menu-container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 让菜单容器的高度占满父容器 */
}

.secondary-menu-title {
  height: 45px; /* 标题区域高度 */
  width: 100%; /* 标题区域宽度与菜单容器宽度相同 */
  display: flex;
  line-height: 70px;
  font-size: 20px;
  align-items: center;
  justify-content: center;
  background-color: #ffffff; /* 标题区域背景颜色 */
}

.menu-title {
  height: 55px; /* 标题区域高度 */
  width: 100%; /* 标题区域宽度与菜单容器宽度相同 */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff; /* 标题区域背景颜色 */
  /* border-bottom: 1px solid #ddd;  */
}

.menu-content {
  flex: 1; /* 让菜单内容区域占据剩余的空间 */
  display: flex;
}

.el-menu-vertical-demo {
  width: 70px; /* 左侧一级菜单宽度 */
  /* font-family: 'SimSun', sans-serif;  */
}

.secondary-menu {
  /* 右侧二级菜单宽度 */
  /* width: 190px;  */
  background-color: #ffffff;
  overflow: auto; /* 如果菜单内容超出高度，显示滚动条 */
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 170px;
}

.menu-icon {
  position: relative;
  display: inline-block;
  position: absolute;
  top: -12px; /* 调整图标位置 */
  left: 30%; /* 图标水平居中 */
  transform: translateX(); /* 水平居中 */
}

.menu-text {
  margin-top: 20px;
  font-size: 15px;
  /* text-align: center; */
}

.secondary-menu-text {
  align-items: center;
}
</style>
